<template>
    <div id="set-nickname">
        <div class="setList" @click="set()">
            <div class="setList-left">性别</div>
            <div class="setList-right" v-if="sex == 1">男<i class="iconfont icon-jiantou"></i></div>
            <div class="setList-right" v-if="sex == 2">女<i class="iconfont icon-jiantou"></i></div>
            <div class="setList-right" v-if="!sex">请选择<i class="iconfont icon-jiantou"></i></div>
        </div>
        </div>
            <!--设置昵称-->
            <div v-if="show" class="set-wrap">
                <div id="purchased">
                    <div class="purchased-top">
                        <i class="iconfont icon-fanhui" @click="close"></i>
                        <span>{{title}}</span>
                    </div>
                </div>
                <div class="settingSex">
                    <div class="settingSex-list" @click="sexBtn(0)">男<i class="iconfont icon-yes" v-if="sex == 1"></i></div>
                    <div class="settingSex-list" @click="sexBtn(1)">女<i class="iconfont icon-yes" v-if="sex == 2"></i></div>
                </div>
            </div>
    </div>
</template>

<script>
    import {userService} from '../../service/userService'
    export default {
        data () {
            return {
                show:false,
                changeName:'',
                name:'',
                type:1
            }
        },
        props:['nickName','title','realName'],
        mounted(){
            let that = this
//            console.log(that);
            if(that.nickName){
                that.name = that.nickName
                that.type=1
            }
            if(that.realName){
                that.name = that.realName
                that.type=2
            }
        },
        methods:{
            //更改名字
            changeNames:function(){
                let that = this;
                let params={};
                if(that.type*1===1){
                    params.nickName=that.name
                }else if(that.type*1===2){
                    params.realName=that.name
                }
                userService.myCenterSet(params).then(function (res) {
                    this.changeName = true;
                    this.show = false;
                });
            },
            //清除名字按钮
            cleanName:function(){
                this.name = ''
            },
            set:function(){
                this.show = true
            },
            close:function(){
                this.show = false
            },
        }
    }
</script>

<style lang="less">
#set-nickname{
    .settingName{
        width:100%;
        height:1.2rem;
        line-height:1.2rem;
        margin:0.27rem 0;
        padding:0 0.53rem;
        box-sizing: border-box;
        background:#fff;
        overflow: hidden;
        input{
            width:90%;
            height:100%;
            border:none;
            outline:none;
            font-size:14px;
        }
        i{
            float:right;
            color:#EEEEEE;
        }
    }
}

</style>